<include file="public@header" />
</head>

<body>
    <div class="wrap">
        <ul class="nav nav-tabs">
            <ul class="nav nav-tabs">
                <li><a href="{:url('bill/index',array('id'=>$id))}">流水账目</a></li>
                <li class="active"><a href="">新增流水账目</a></li>
            </ul>
        </ul>
        <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('doadd')}">


            <div class="form-group">
                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    <span class="form-required">*</span>支付方式
                </label>
                <div class="col-md-6 col-sm-10">
                    <select name="pay" class="form-control">
                        <option value=""></option>
                        <option value="1">微信</option>
                        <option value="2">支付宝</option>
                        <option value="3">银行卡</option>
                        <option value="4">淘宝</option>
                        <option value="5">现金</option>
                        <option value="6">签字</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    <span class="form-required">*</span>申请人
                </label>
                <div class="col-md-6 col-sm-10">
                    <select name="applicant" id="nameSelect" class="form-control">
                        <option value=""></option>
                        <volist name="leader" id="vv">
                            <option value="{$vv.id}">{$vv.name}</option>
                        </volist>
                    </select>
                </div>
            </div>


            <div class="form-group">
                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    <span class="form-required">*</span>工种
                </label>
                <div class="col-md-6 col-sm-10">
                    <input name="type" id="typeSelect" class="form-control" />
                </div>
            </div>

            <div class="form-group">

                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    <span class="form-required">*</span>供应商
                </label>
                <div class="col-md-6 col-sm-10">
                    <select name="supplier" class="form-control">
                        <option value=""></option>
                        <foreach name="supplier" item="sup">
                            <option value="{$sup.id}">{$sup.attrName}</option>
                        </foreach>
                    </select>
                </div>
            </div>

            <div class="form-group">

                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    <span class="form-required">*</span>事件简介
                </label>
                <div class="col-md-6 col-sm-10">
                    <textarea name="desc" cols="25" rows="5" class="form-control"></textarea>
                </div>
            </div>

            <div class="form-group">

                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    <span class="form-required">*</span>经办人
                </label>
                <div class="col-md-6 col-sm-10">
                    <select name="handled" class="form-control">
                        <option value=""></option>
                        <volist name="staff" id="c">
                            <option value="{$c.id}">{$c.name}</option>
                        </volist>
                    </select>
                </div>
            </div>

            <div class="form-group">

                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    <span class="form-required">*</span>单位
                </label>
                <div class="col-md-6 col-sm-10">
                    <select name="unit" class="form-control">
                        <option value=""></option>
                        <option value="米">米</option>
                        <option value="平方">平方</option>
                        <option value="项">项</option>
                        <option value="扇">扇</option>
                        <option value="樘">樘</option>
                        <option value="组">组</option>
                        <option value="吨">吨</option>
                        <option value="小时">小时</option>
                        <option value="张">张</option>
                        <option value="车">车</option>
                    </select>
                </div>
            </div>

            <div class="form-group">

                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    <span class="form-required">*</span>数量
                </label>
                <div class="col-md-6 col-sm-10">
                    <input type="number" class="form-control" name="num">
                </div>
            </div>

            <div class="form-group">

                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    <span class="form-required">*</span>金额
                </label>
                <div class="col-md-6 col-sm-10">
                    <input type="text" class="form-control" name="price">
                </div>
            </div>

            <div class="form-group">

                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    <span class="form-required">*</span>走账
                </label>
                <div class="col-md-6 col-sm-10">
                    <select name="payfor" class="form-control">
                        <option value=""></option>
                        <option value="1">备用金</option>
                        <option value="2">签字</option>
                        <option value="3">公司付</option>
                        </foreach>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    <span class="form-required">*</span>时间
                </label>
                <div class="col-md-6 col-sm-10">
                    <input type="date" class="form-control" name="insTime">
                </div>
            </div>

            <div class="form-group">
                <label for="js-smtpsecure" class="col-sm-2 control-label">
                    单据图片
                </label>
                <div class="col-md-6 col-sm-10">
                    <input type="file" id="imgUpload" class="form-control" name="imgs[]" multiple accept="image/*">
                    <div id="imgPreviewContainer" class="image-preview-container" style="margin-top: 10px; display: flex; flex-wrap: wrap;"></div>
                </div>
            </div>


            <input type="hidden" name="eid" value="{$id}">


            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('SAVE')}</button>
                    <a class="btn btn-default" href="javascript:history.back(-1);">{:lang('BACK')}</a>
                </div>
            </div>
        </form>
    </div>
    <script src="__STATIC__/js/admin.js"></script>
    <script src="__STATIC__/js/image-uploader.js"></script>
    <style>
        /* 模态框样式 */
        .image-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            overflow: auto;
        }
        
        .modal-content {
            margin: auto;
            display: block;
            max-width: 90%;
            max-height: 90%;
            margin-top: 2%;
        }
        
        .modal-close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .image-preview-item {
            position: relative;
            margin: 5px;
            width: 100px;
            height: 100px;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .image-preview-item:hover {
            transform: scale(1.05);
        }
        
        .image-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .image-preview-item .delete-btn {
            position: absolute;
            top: 0;
            right: 0;
            background: rgba(255, 0, 0, 0.7);
            color: white;
            border: none;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            font-size: 12px;
            z-index: 10;
        }
    </style>
    <script>
        // 申请人id与工种的映射
        var nameTypeMap = {
            <volist name="leader" id="vv">
                "{$vv.id}": "{$vv.type}"<if condition="$i neq count($leader)">,</if>
            </volist>
        };

        document.addEventListener('DOMContentLoaded', function () {
            // 姓名与工种联动
            var nameSelect = document.getElementById('nameSelect');
            var typeSelect = document.getElementById('typeSelect');
            nameSelect.addEventListener('change', function () {
                var id = this.value;
                var type = nameTypeMap[id] || '';
                typeSelect.value = type;
            });
            
            // 初始化图片上传组件
            var imgUploader = new ImageUploader({
                inputId: 'imgUpload',
                previewContainerId: 'imgPreviewContainer',
                fieldName: 'imgs',
                existingImages: [],
                useDataTransfer: true
            });
        });
    </script>
    
    <!-- 图片预览模态框 -->
    <div id="imageModal" class="image-modal">
        <span class="modal-close">&times;</span>
        <img class="modal-content" id="modalImage">
    </div>
</body>

</html>